<template>
    <a-layout id="components-layout-demo-responsive">
        <a-layout-sider breakpoint="lg" collapsedWidth="0" @collapse="onCollapse" @breakpoint="onBreakpoint" :style="{boxShadow: '2px 0 6px rgba(0,21,41,.35)', zIndex: '999'}">
            <div class="logo">
                <span>二幼满春分园</span>
            </div>
            <a-menu theme="dark" mode="inline" :selectedKeys="selectedKeys">
                <!-- <a-menu-item key="home" @click="toPage('home')">
                    <a-icon type="home" />
                    <span class="nav-text">首页</span>
                </a-menu-item> -->
                <a-menu-item key="child" @click="toPage('child')">
                    <a-icon type="align-center" />
                    <span class="nav-text">报名管理</span>
                </a-menu-item>
                <!-- <a-menu-item key="lotteryList" @click="toPage('lotteryList')">
                    <a-icon type="message" />
                    <span class="nav-text">开始抽选</span>
                </a-menu-item>
                <a-menu-item key="lotteryResult" @click="toPage('lotteryResult')">
                    <a-icon type="thunderbolt" />
                    <span class="nav-text">抽选结果</span>
                </a-menu-item> -->
                <a-menu-item key="lottery" @click="toPage('lottery')">
                    <a-icon type="thunderbolt" />
                    <span class="nav-text">摇号</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header :class="{ 'sider-collapsed': collapsed }" :style="{ background: '#fff', padding: 0,  position: 'fixed', width: 'calc(100% - 200px)', zIndex: '998' }">
                <a-breadcrumb :style="{marginLeft: '30px', display: 'inline-block'}">
                    <a-breadcrumb-item>
                        <a-icon type="home" />
                    </a-breadcrumb-item>
                    <template v-if="breadcrumbTitles[0]">
                        <a-breadcrumb-item v-for="breadcrumbTitle in breadcrumbTitles" v-bind:key="breadcrumbTitle">{{breadcrumbTitle}}</a-breadcrumb-item>
                    </template>
                </a-breadcrumb>
                <a-dropdown placement="bottomLeft" :trigger="['click']" :style="{float: 'right', paddingRight: '20px'}">
                    <span class="ant-dropdown-link" href="#">
                            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                            管理员 <a-icon type="down" />
                        </span>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a rel="noopener noreferrer" href="/logout">注销</a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </a-layout-header>
            <a-layout-content :style="{ margin: '88px 16px 0' }">
                <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                    <router-view />
                </div>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script>
    export default {
        data() {
            return {
                collapsed: '',
                selectedKeys: [],
                breadcrumbTitles: []
            };
        },
        methods: {
            onCollapse(collapsed, type) {
                this.collapsed = collapsed;
                console.log(collapsed, type);
            },
            onBreakpoint(broken) {
                console.log(broken);
            },
            toPage(routerName) {
                this.$router.push({
                    name: routerName
                });
            },
            changeRouter() {
                if (this.$route.name) {
                    console.log(this.$route);
                    this.breadcrumbTitles = [this.$route.meta.title];
                    this.selectedKeys = [this.$route.name];
                }
            }
        },
        created() {
            this.changeRouter();
        },
        watch: {
            $route: "changeRouter"
        }
    };
</script>

<style>
    #components-layout-demo-responsive {
        height: 100%;
    }
    .sider-collapsed {
        width: 100% !important;
    }
    #components-layout-demo-responsive .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        justify-content: center;
        display: flex;
        align-items: center;
    }
</style>
